<script setup>
  import { ref,nextTick, defineModel } from 'vue'
  const props = defineProps({
    msg: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: false,
      default (){
        return [
            {title: '证书名证书名',image:'/src/assets/honor1.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊！海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊！海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊！'},
            {title: '证书名证书名',image:'/src/assets/honor2.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '证书名证书名',image:'/src/assets/honor3.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '证书名证书名',image:'/src/assets/honor6.png', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
        ]
      }
    },
    current: {
      type: Number,
      required: false,
      default(){
        return 0
      }
    }
  })
  
  import { Swiper } from 'swiper'; 
  import 'swiper/css';
  const count = ref(0)
  const current = defineModel();
  current.value = 1
  let onSlidePrev = ()=>{};
  let onSlideNext = ()=>{};
  let bindleChangCurrent = (index)=>{
    current.value = index + 1;
  }
  nextTick(() => {
    // const swiper = honorSwiper.$swiper;
    // honorSwiper.navigation.init();
    let cutNum = isMobile()?2:3;
    let cutCenter = isMobile()?false:true;
    console.log('cutNum',cutNum);

    let honorParams = {
      direction:'horizontal',// 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      slidesPerView: cutNum,
      centeredSlides: cutCenter,
      spaceBetween: 1,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        type: "fraction",
      },
      
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    };

    var mySwiper = new Swiper('#honorSwiper', honorParams);
    onSlidePrev = ()=>{
      mySwiper.slidePrev();
      bindleChangCurrent(mySwiper.realIndex);
      honorlb.slidePrev();
    }
    onSlideNext = ()=>{
      mySwiper.slideNext();
      bindleChangCurrent(mySwiper.realIndex);
      honorlb.slideNext();
    }

    function isMobile() {
      const mobileWidthThreshold = 768; // 设定移动端宽度阈值为768px
      // console.log('window.innerWidth:',window.innerWidth);
      return window.innerWidth <= mobileWidthThreshold;
    }


    

    class wenSwiper {
      constructor(name,func){
        this.swiper = document.querySelector(name);
        this.shower = this.swiper.querySelector(func.show || '.wen-swiper-show');
        this.slideLeng = this.shower.querySelectorAll('.wen-swiper-slide').length;
        this.__func = func;

        this.current = func.current || 0;
        this.viewNum = func.viewNum || 1;
        this.viewCenter = func.viewCenter || false;
        
        this.change();

        if(func.navigation){
          console.log('注册上下按钮事件');
          this.prevEl = document.querySelector(func.navigation.btnPrev || '.wen-swiper-prev');
          this.prevEl.addEventListener('click',()=>{this.slidePrev()});
          this.nextEl = document.querySelector(func.navigation.btnNext || '.wen-swiper-next');
          this.nextEl.addEventListener('click',()=>{this.slideNext()});
        }
      }

      change(){
        if(this.__func.change){
          this.__func.change(this);
          return;
        }
        this.shower.style.translate = 'translate3d('+ 0 -this.swiper.innerWidth/((this.viewNum || 1) + Math.floor(this.viewNum/2))%this.slideLeng+'px, 0px, 0px)';
      }
      // 跳到位置
      slideTo(){
        console.log('slideLeng:',this.slideLeng);
        this.current = (this.current<0?this.current+this.slideLeng:this.current)%this.slideLeng;
        current.value = this.current + 1;
        this.change();
      }
      // 下一个
      slideNext(){
        console.log('下一个',this);
        this.current++;
        this.slideTo()
      }
      // 上一个
      slidePrev(){
        console.log('上一个',this);
        this.current--;
        this.slideTo()
      }
    }


    let honorlb = new wenSwiper('#honorlb',{
      viewNum:3,
      current:0,
      viewCenter:true,
      isMobile: isMobile(),
      navigation:{
        btnPrev:'.wen-swiper-prev-honor',
        btnNext:'.wen-swiper-next-honor'
      },
      change: (that)=>{
        console.log('change that:', that);
        let lunbo = [
          'opacity: 0;-webkit-filter: opacity(0); left:-128px;right:auto;padding:128px;',
          'opacity: 0.6;-webkit-filter: opacity(60); left:0;right:auto;padding:64px;',
          'opacity: 1;-webkit-filter: opacity(100); left:50%;right:auto;padding:0px; transform: translate(-50%,-50%);z-index:1;',
          'opacity: 0.6;-webkit-filter: opacity(60); left:auto;right:0;padding:64px;',
          'opacity: 0;-webkit-filter: opacity(0); left:auto;right:-128px;padding:128px;',
          'opacity: 0;-webkit-filter: opacity(0); left:auto;right:auto;',
        ]

        console.log('手机端',that.__func.isMobile);
        if(that.__func.isMobile){
          lunbo = [
            'opacity: 0;-webkit-filter: opacity(0); left:-100%;',
            'opacity: 0.6;-webkit-filter: opacity(60); left:-50%;',
            'opacity: 1;-webkit-filter: opacity(100); left:0%;z-index:1;',
            'opacity: 0.6;-webkit-filter: opacity(60); left:50%;',
            'opacity: 0;-webkit-filter: opacity(0); left:100%;',
            'opacity: 0;-webkit-filter: opacity(0); left:auto;',
          ]
        }
        let nodes = that.shower.querySelectorAll('.wen-swiper-slide');
        console.log(nodes);
        nodes.forEach((element,index) => {
          // console.log('index:',index,' current:',that.current);
          let _current = index-that.current;
          if(_current<0)_current +=that.slideLeng;
          if(_current>that.slideLeng)_current -=that.slideLeng;
          switch(_current){
            case nodes.length-2:
            case -2:{
              element.style = lunbo[0];
              break;
            }
            case nodes.length-1:
            case -1:{
              element.style = lunbo[1];
              break;
            }
            case nodes.length:
            case 0:{
              element.style = lunbo[2];
              break;
            }
            case nodes.length+1:
            case 1:{
              element.style = lunbo[3];
              break;
            }
            case nodes.length+2:
            case 2:{
              element.style = lunbo[4];
              break;
            }
            default:{
              element.style = lunbo[5];
            }
          }
        });
        // classList.add("active");

      }
    })

  });


  </script>
  
  <template>
    <div class="w-full h-full pt-[152px] mobile:pt-[80px] mobile:px-4 self-center bg-no-repeat wen-mobile-down">
        <div class="flex mb-[99px] mobile:mb-8">
            <span class="wen-index-title">资质证书</span>
        </div>
        <div class="flex p-2 relative mobile:mb-[30px] wow animate__animated animate__fadeInUp timing">
            <div class="w-1/3 block mobile:w-full" >
                <h3 class="text-3xl text-tblack my-8 font-bold line-clamp-1 mobile:mt-0 mobile:text-2xl"><a :href="data[0].url">{{ data[0].title }}</a></h3>
                <p class="text-xl !leading-relaxed text-gray3 w-full line-clamp-6 mobile:text-sm mobile:line-clamp-4"><a :href="data[0].url">{{ data[0].infor }}</a></p>
                <div class="mt-24 leading-10 font-bold flex mobile:mt-4 mobile:justify-center mobile:hidden">
                    <img class="inline-block w-12 mobile:w-8 swiper-button-prev wen-swiper-prev-honor" @click="onSlidePrev()" src="/src/assets/Frame_27.svg" alt="">
                    <span class="text-[64px] px-6 mobile:text-4xl">{{current}}/{{data.length}}</span>
                    <img class="inline-block w-12 mobile:w-8 swiper-button-next wen-swiper-next-honor" @click="onSlideNext()" src="/src/assets/Frame_26.svg" alt="">
                </div>
            </div>
        </div>
        <div class="w-3/4 max-w-[1266px] mobile:max-w-full absolute ilmobile:-right-[105px] ilmobile:top-1/2 ilmobile:-translate-y-1/2 wen-bgi-taizi flex justify-items-center mobile:w-full mobile:left-0 mobile:relative">
            <div class="honorSwiper w-full translate-x-16 relative mobile:translate-x-0">
                <img class="absolute top-full w-1/2 left-1/2 -translate-x-1/2 mobile:hidden" src="/src/assets/taizi.png" />
                <div class="swiper honorSwiper h-[285px] mobile:w-[125%] ilmobile:h-[600px]" id="honorlb">
                  <div class="wen-swiper-show">
                      <div class="wen-swiper-slide w-full timing opacity-0 mobile:!p-1" v-for="(item, index) in data"><img class="w-full" :src="item.image" /></div>
                  </div>
                </div>
                <div class="mt-24 leading-10 font-bold flex mobile:mt-10 mobile:justify-center ilmobile:hidden">
                    <img class="inline-block w-12 mobile:w-8 wen-swiper-prev-honor" @click="onSlidePrev()" src="/src/assets/Frame_27.svg" alt="">
                    <span class="text-6xl px-3 mobile:text-4xl">{{current}}/{{data.length}}</span>
                    <img class="inline-block w-12 mobile:w-8 wen-swiper-next-honor" @click="onSlideNext()" src="/src/assets/Frame_26.svg" alt="">
                </div>
            </div>
        </div>
    </div>
  </template>
  <style scoped>

    #honorlb{overflow: hidden;}
    .wen-swiper-show{box-sizing: content-box;width: fit-content;width: 100%;display: flex;}
    .wen-swiper-slide{width: 50%; display: block;position: absolute;left: 50%;top: 50%; transform: translateY(-50%);transition-duration: 500ms;}
    
    @media screen and (orientation: landscape) {
      .wen-swiper-slide{padding: 128px;width: 33%;}
    }
    @media screen and (orientation: portrait) {
      .wen-swiper-slide{padding: 1em;width: 50%;}
      
    }
  </style>
